// 付款中订单数量统计弹窗

import { useMemo, useState, useEffect } from "react";
import { Alert, Button } from "antd";
import CommonModal from "@/components/CommonModal";
import CommonLoading from "@/components/CommonLoading";
import IconFont from "@/components/IconFont";
import { unhappyTotal } from "../../../../services";

const PaymentStatisticsModal = ({ handleCancel }) => {
	const [loading, setLoading] = useState(false);
	const [paymentStatistics, setPaymentStatistics] = useState(0); //支付待处理的数量

	useEffect(() => {
		getUnhappyTotal();
	}, []);

	//获取全部支付预览
	const getUnhappyTotal = async () => {
		setLoading(true);
		const { success, data = 0 } = await unhappyTotal();
		if (success) {
			setPaymentStatistics(data);
		}
		setLoading(false);
	};

	const message = useMemo(() => {
		return (
			<>
				<p>注：1.关闭弹框不会影响支付任务的进行，也可查看待付款主页面底部的剩余支付中订单数</p>
				<p>2.支付中的订单会暂时从”待付款“消失（可在“全部tab页“查询到）</p>
				<p>3.支付失败的订单会返回“待付款”，可在操作日志里查看失败原因；支付成功的订单会到待发货</p>
				<p>4.多次全部支付，数值会累计</p>
			</>
		);
	}, []);

	return (
		<CommonModal
			visible={true}
			onCancel={() => handleCancel(paymentStatistics)}
			width={458}
			footer={[
				<Button onClick={() => handleCancel(paymentStatistics)} key="close">
					关闭
				</Button>
			]}
		>
			<div className="common-color13">
				<IconFont type="iconjingshi" />
				<span style={{ fontSize: "16px", paddingLeft: "6px" }}>温馨提示</span>
			</div>
			<div className="common-color4" style={{ textIndent: "20px", marginBottom: "10px" }}>
				订单正在处理，剩余支付中订单数为：
				<span className="common-color9" style={{ fontSize: "20px", marginRight: "6px" }}>
					{paymentStatistics}
				</span>
				<span></span>
			</div>
			<Alert message={message} />
			<CommonLoading loading={loading} />
		</CommonModal>
	);
};

export default PaymentStatisticsModal;
